<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		h2{
			font-size: 20px;
		}
		.list li{
			list-style: none;
			width: 400px;
			float: left;
			margin-left: 20px;
		}
		img {
			width: 250px;
			height: 150px;
		}
	</style>
</head>

<body>
	<h2>后台管理系统首页</h2>
	<div class="item" style="display: none;">
		用户：<span id="username"></span>
		<a href="javascript:;" id="logout">退出</a>


		<div id="send">
			商品名称：<input type="text" id="" value="" /><br />
			商品价格：<input type="text" id="" value="" /><br />
			商品地址：<input type="text" id="" value="" /><br />
			商品描述：<input type="text" id="" value="" /><br />

			<input type="button" name="" id="" value="添加商品" />
		</div>

		<ul class="list">
			<!-- <li>
					<h2></h2>
					<p></p>
					<img src="" >
					<p></p>
					<button type="button" class="delete-btn">删除</button>
				</li> -->

		</ul>

	</div>
	<div class="item" style="display: none;">
		<a href="登录.html">请登录</a>
	</div>
	<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let username = localStorage.getItem('username')
		let token = localStorage.getItem('token')
		let id = localStorage.getItem('id')
		let items = document.querySelectorAll('.item')
		if (token) {
			//登录
			items[0].style.display = 'block';
			let usernameP = document.querySelector('#username');
			usernameP.innerHTML = username;

			// 商品列表展示
			loadData()
			let plistAPI = 'http://jx.xuzhixiang.top/ap/api/productlist.php'

			axios.get(plistAPI, {
				params: {
					uid: id
				}
			}).then(res => {
				console.log(res.data)
			})


			// 添加商品
			let goodsAddAPI = 'http://jx.xuzhixiang.top/ap/api/goods/goods-add.php'
			let ipts = document.querySelectorAll('#send input')
			ipts[4].onclick = function () {
				let pname = ipts[0].value
				let pprice = ipts[1].value
				let pdesc = ipts[2].value
				let pimg = ipts[3].value
				let obj = {
					pname: pname,
					pprice,
					pdesc,
					pimg,
					uid: id
				}
				console.log(obj)
				axios.get(goodsAddAPI, {
					params: obj
				}).then(res => {
					console.log(res.data)
					alert(res.data.msg)

					loadData()
				})

			}

		} else {
			// 没有登录
			items[1].style.display = 'block'
		}
		// 退出按钮
		let logoutBtn = document.querySelector('#logout');
		logoutBtn.onclick = function () {
			localStorage.removeItem('username')
			localStorage.removeItem('token')
			alert('退出成功');
			location.href = '登录.html'

		}

		function loadData() {
			let plistAPI = 'http://jx.xuzhixiang.top/ap/api/productlist.php'
			axios.get(plistAPI, {
				params: {
					uid: id
				}
			}).then(res => {
				let html = ''
				for (let i = 0; i < res.data.data.length; i++) {
					let pObj = res.data.data[i]
					html +=
						`
						<li>
							<img src="${pObj.pimg}">
							<h2>${pObj.pname}</h2>
							<p>${pObj.pdesc}</p>
							<p>${pObj.pprice}</p>
							
							<button type="button" class="delete-btn" data-id='${pObj.pid}'>删除</button>
							<button type="button" class="update-btn" data-id='${pObj.pid}'>修改</button>
							<a href='修改.html?pid=${pObj.pid}'>修改</a>
						</li>
						`
				}
				let list = document.querySelector('.list')
				list.innerHTML = html

				let deleteBtns = document.querySelectorAll('.delete-btn')
				let updataBtns = document.querySelectorAll('.update-btn')
				for (let i = 0; i < deleteBtns.length; i++) {
					deleteBtns[i].onclick = function () {
						// 调用删除接口

						// 页面更新
						let goodsDeleteAPI = 'http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php'
						let pid = this.getAttribute('data-id');
						let uid = id;
						// token;
						axios.get(goodsDeleteAPI, {
							params: {
								pid,
								uid,
								token
							}
						}).then(res => {
							console.log(res.data)
							this.parentNode.remove()
						})

					}

				}

				// updataBtns[i].onclick=function(){

				// }

			})

		}
	</script>
</body>

</html>